import { GUI } from "dat.gui"
import { 
  AxesHelper,
  BackSide,
  Float32BufferAttribute,
  HemisphereLight,
  Mesh,
  MeshNormalMaterial,
  PerspectiveCamera, 
  QuadraticBezierCurve3, 
  Scene, 
  TorusKnotGeometry, 
  TubeBufferGeometry, 
  Vector2, 
  Vector3, 
  WebGLRenderer,
  Group,
  BoxGeometry,
  VertexColors,
  SphereGeometry,
  ArrowHelper
} from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import stats from '../utils/stats'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
// 不能设置为0
camera.position.set(-3, 13, 39)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0xeeeeee)
renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

// 添加坐标系
const axes = new AxesHelper(100)
scene.add(axes)

const light = new HemisphereLight(0xffffff, 0xcccccc, 1)
scene.add(light)

let group: Group
const controls = {
  cubeX: -4,
  cubeY: 3,
  cubeZ: -2,

  sphereX: 10,
  sphereY: 6,
  sphereZ: 0,

  groupX: 0,
  groupY: 0,
  groupZ: 0,
  groupScale: 1,

  draw() {
    scene.remove(group)
    const material = new MeshNormalMaterial()

    const cubeGeom = new BoxGeometry(5, 5, 5)
    const cube = new Mesh(cubeGeom, material)
    cube.position.set(this.cubeX, this.cubeY, this.cubeZ)
    
    const sphereGeom = new SphereGeometry(5, 10, 10)
    const sphere = new Mesh(sphereGeom, material)
    sphere.position.set(this.sphereX, this.sphereY, this.sphereZ)

    
    group = new Group()
    group.position.set(this.groupX, this.groupY, this.groupZ)
    group.scale.set(this.groupScale, this.groupScale, this.groupScale)
    group.add(cube)
    group.add(sphere)
    
    // y 轴辅助箭头
    const arrow = new ArrowHelper(new Vector3(0, 1, 0), group.position, 10, 0x0000ff)
    group.add(arrow)

    scene.add(group)
  }
}

controls.draw()

const gui = new GUI()
const cubeGUI = gui.addFolder('矩形')
cubeGUI.add(controls, 'cubeX', -10, 10).name('X').onChange(controls.draw.bind(controls))
cubeGUI.add(controls, 'cubeY', -10, 10).name('Y').onChange(controls.draw.bind(controls))
cubeGUI.add(controls, 'cubeZ', -10, 10).name('Z').onChange(controls.draw.bind(controls))

const sphereGUI = gui.addFolder('圆形')
sphereGUI.add(controls, 'sphereX', -10, 10).name('X').onChange(controls.draw.bind(controls))
sphereGUI.add(controls, 'sphereY', -10, 10).name('Y').onChange(controls.draw.bind(controls))
sphereGUI.add(controls, 'sphereZ', -10, 10).name('Z').onChange(controls.draw.bind(controls))

const groupGUI = gui.addFolder('组')
groupGUI.add(controls, 'groupX', -10, 10).name('X').onChange(controls.draw.bind(controls))
groupGUI.add(controls, 'groupY', -10, 10).name('Y').onChange(controls.draw.bind(controls))
groupGUI.add(controls, 'groupZ', -10, 10).name('Z').onChange(controls.draw.bind(controls))
groupGUI.open()

function render(time: number): void {
  stats.update()

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

requestAnimationFrame(render)